<template>
	<view>
		<view class="boxes uniFlex">
			<view class="title">户号</view>
			<input v-model="usercode" class="input" type="text" placeholder="请输入户号" placeholder-class="pcs">
		</view>
		<view class="boxes uniFlex" @click="show=true">
			<view class="title">选择地区</view>
			<view v-if="province" class="input">{{province}}-{{city}}</view>
			<input v-else disabled class="input" type="text" placeholder="请选择地区" placeholder-class="pcs">
		</view>
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="show=false" closeOnClickOverlay @close="show=false">
		</u-picker>
		
		<view class="boxes uniFlex">
			<view class="title">姓名</view>
			<input v-model="name" class="input" type="text" placeholder="请输入姓名" placeholder-class="pcs">
		</view>
		<view class="boxes uniFlex">
			<view class="title">所在地址</view>
			<input v-model="address" class="input" type="text" placeholder="请输入所在地址" placeholder-class="pcs">
		</view>
		
		<view class="boxes uniFlex">
			<view class="title">是否南方电网</view>
			<view class="input">
				<u-switch v-model="value" @change="change" activeColor="#FC6CA7"></u-switch>
			</view>
		</view>
		
		<view class="boxes uniFlex">
			<view class="title">身份证后6位</view>
			<input @keyup="code=code.replace(/[, ]/g,'')" v-model="code" class="input" type="text" placeholder="南方电网必须填写身份证后6位才能充值" placeholder-class="pcs">
		</view>
		
		<view class="boxes uniFlex">
			<view class="title">是否默认</view>
			<view class="input">
				<u-switch v-model="value2" @change="change2" activeColor="#FC6CA7"></u-switch>
			</view>
		</view>
		<view @click="submit" class="other-button" hover-class="other-button-hover">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usercode:'',//户号
				show: false,
				columns: [
					// ['江苏', '安徽'],
					// ['昆山', '徐州', '南京']
				],
				columnData: [
					// ['昆山', '徐州', '南京'],
					// ['阜阳', '合肥', '宿州', '芜湖']
				],
				province:'',//省
				city:'',//市
				name:'',
				address:'',
				code:'',
				value:false,//是否南方电网  0国网  1南网
				value2:false,//是否默认  1默认
			}
		},
		onLoad() {
			this.getcitys();
		},
		methods: {
			// 获取城市信息
			async getcitys(){
				let res = await this.$api.getcity();
				if(res.code == 200){
					// console.log(res)
					this.columns = res.data.c1;
					this.columnData = res.data.c2;
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.show = false;
				this.province = e.value[0];
				this.city = e.value[1];
			},
			// 开关
			change(e){
				this.value = e;
			},
			// 开关2
			change2(e){
				this.value2 = e;
			},
			// 提交
			async submit(){
				if(!this.usercode){
					uni.showToast({
						title:'请输入户号',
						icon:'none'
					})
					return;
				}
				if(!this.province || !this.city){
					uni.showToast({
						title:'请选择地区',
						icon:'none'
					})
					return;
				}
				if(this.value){
					if(!this.code){
						uni.showToast({
							title:'请输入身份证后六位',
							icon:'none'
						})
						return;
					}
					if(this.code.length != 6){
						uni.showToast({
							title:'身份证格式不正确',
							icon:'none'
						})
						return;
					}
				}
				let value = this.value ? 1 : 0;
				let value2 = this.value2 ? 1 : 0;
				let res = await this.$api.setcode({
					id:'',
					mid:uni.getStorageSync("tokenUid"),
					number:this.usercode,
					city:this.province,
					area:this.city,
					name:this.name,
					address:this.address,
					type:value,
					card:this.code,
					default:value2,
				});
				if(res.code == 200){
					// console.log(res)
					uni.showToast({
						title:'操作成功'
					})
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}

	.boxes {
		padding: 30upx 0;
		margin:0 30upx;
		border-bottom: 1px solid #ddd;
		font-size: 28upx;
		
		.title{
			width: 200upx;
			color: #000000;
			font-weight: bold;
			font-size: 30upx;
			white-space: nowrap;
		}
		
		.input{
			flex: 1;
			font-size: 28upx;
		}
	}
</style>
